<template>
  <div class="charts-container">
    <div class="chart-box" ref="barChart"></div>
    <div class="chart-box" ref="pieChart"></div>
    <div class="chart-box" ref="ringChart"></div>
    <div class="chart-box" ref="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { weiboDataStatistic } from "@/api/kiku/dataStatistics";

export default {
  data() {
    return {
      dzList: [],
      fxList: [],
      zfList: [],
      dzBzList: [],
      fxHxList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      weiboDataStatistic().then(res => {
        this.dzBzList = res.data.dzStatistics || [];
        this.fxHxList = res.data.fxStatistics || [];
        this.dzList = res.data.dzStatisticsList	|| [];
        this.fxList = res.data.fxStatisticsList	|| [];
        this.zfList = res.data.zfStatisticsList	|| [];
        this.$nextTick(() => {
          this.initCharts();
        });
      }).catch(err => {
        console.error("数据加载失败:", err);
        alert("数据加载失败，请稍后再试！");
      });
    },
    initCharts() {
      this.initBarChart();
      this.initPieChart();
      this.initRingChart();
      this.initLineChart();
    },

    initBarChart() {
      const chart = echarts.init(this.$refs.barChart);
      chart.setOption({
        title: { text: '点赞数 - 可选数据', left: 'center', top: '30px' },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let tooltipHtml = `<div style="font-size: 14px; color: #333;">`;
            params.forEach(param => {
              tooltipHtml += `<div style="margin-bottom: 8px;">
                                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${param.color}; margin-right: 5px;"></span>
                                ${param.seriesName}: ${param.value}
                              </div>`;
            });
            tooltipHtml += `</div>`;
            return tooltipHtml;
          }
        },
        legend: {
          data: ['点赞数', '分享数', '转发数'],
          selected: { '点赞数': true, '分享数': false, '转发数': true }
        },
        xAxis: { type: 'category', data: ['大于100w', '50w-100w', '10w-50w', '10w以下'] },
        yAxis: { type: 'value' },
        series: [
          { name: '点赞数', type: 'bar', data: this.dzList, itemStyle: { color: '#3b82f6' } },
          { name: '分享数', type: 'bar', data: this.fxList, itemStyle: { color: '#fbbf24' } },
          { name: '转发数', type: 'bar', data: this.zfList, itemStyle: { color: '#ef4444' } }
        ]
      });
    },

    initPieChart() {
      const chart = echarts.init(this.$refs.pieChart);
      chart.setOption({
        title: { text: '点赞数占比', left: 'center', top: '30px' },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `<div style="font-size: 14px; color: #333;">
                      <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${params.color}; margin-right: 5px;"></span>
                      ${params.name}: ${params.value} (${params.percent.toFixed(2)}%)
                    </div>`;
          }
        },
        legend: { data: ['大于100w', '50w-100w', '10w-50w', '10w以下'] },
        series: [{
          type: 'pie',
          radius: '50%',
          data: this.dzBzList
        }]
      });
    },

    initRingChart() {
      const chart = echarts.init(this.$refs.ringChart);
      chart.setOption({
        title: { text: '分享数环形图', left: 'center', top: '30px' },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `<div style="font-size: 14px; color: #333;">
                      <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${params.color}; margin-right: 5px;"></span>
                      ${params.name}: ${params.value} (${params.percent.toFixed(2)}%)
                    </div>`;
          }
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: this.fxHxList
        }]
      });
    },

    initLineChart() {
      const chart = echarts.init(this.$refs.lineChart);
      chart.setOption({
        title: { text: '综合趋势折线图', left: 'center', top: '30px' },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let tooltipHtml = `<div style="font-size: 14px; color: #333;">`;
            params.forEach(param => {
              tooltipHtml += `<div style="margin-bottom: 8px;">
                                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${param.color}; margin-right: 5px;"></span>
                                ${param.seriesName}: ${param.value}
                              </div>`;
            });
            tooltipHtml += `</div>`;
            return tooltipHtml;
          }
        },
        legend: { data: ['点赞数', '分享数', '转发数'] },
        xAxis: { type: 'category', data: ['大于100w', '50w-100w', '10w-50w', '10w以下'] },
        yAxis: { type: 'value' },
        series: [
          { name: '点赞数', type: 'line', data: this.dzList },
          { name: '分享数', type: 'line', data: this.fxList },
          { name: '转发数', type: 'line', data: this.zfList }
        ]
      });
    }
  }
};
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-box {
  margin-top: 40px;
  width: 100%;
  height: 400px;
}
</style>
